<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To Do List</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
<!-- 头部标题 + 输入表单 + 用户信息 -->
<div class="upper clearfix layer">

    <div class="title fl">
        <h1><a href="#">To Do List</a></h1>
    </div>
    
    <div class="userMessage fr">
        <ul class="clearfix">
            <li class="fl">
                <span class="iconfont">&#xe60a;</span>
                <a href="#">登录</a>
                <span>/</span>
                <a href="#">注册</a>
            </li>
        </ul>
    </div>

    <div class="form clearfix">
        <form class="main" action="#" method="get">
            <div class="inputBox fl">
                <span class="iconfont">&#xe60e;</span>
                <input type="text" name="addItem" value="在这里写下下一项待办事项:)" style="color: #999;" onfocus="if(this.value == '在这里写下下一项待办事项:)') {this.value = ''; this.style.color='#3c3c3c';}" onblur="if(this.value == '') {this.value = '在这里写下下一项待办事项:)'; this.style.color='#999'}">
            </div>
            <div class="button fl">
                <button type="submit" value="确定添加">添加</button>
            </div>
        </form>
    </div>

</div>

<!-- 注册主体 -->
<div class="register">
    <form action="#" method="GET">
        <div class="username">
            <span>用户名</span>
            <input type="text" name="username" value="请输入用户名" style="color: #999;" onfocus="if(this.value=='请输入用户名') {this.value=''; this.style.color='#3c3c3c';}" onblur="if(this.value=='') {this.value='请输入用户名';this.style.color='#999';}">
        </div>
    
        <div class="password">
            <span>密码</span>
            <input type="password" name="password">
            <button class="hidden iconfont" type="submit" value="hidePassword">&#xe612;</button>
        </div>
    
        <div class="confirm">
            <span>确认密码</span>
            <input type="password" name="confirmPassword">
        </div>
    
        <div class="sex">
            <span>性别</span>
            <input type="text" name="username" value="1代表男性，2代表女性" style="color: #999;" onfocus="if(this.value=='1代表男性，2代表女性') {this.value=''; this.style.color='#3c3c3c';}" onblur="if(this.value=='') {this.value='1代表男性，2代表女性';this.style.color='#999';}">
        </div>
    
        <div class="age">
            <span>年龄</span>
            <input type="text" name="username" value="请输入您的年龄" style="color: #999;" onfocus="if(this.value=='请输入您的年龄') {this.value=''; this.style.color='#3c3c3c';}" onblur="if(this.value=='') {this.value='请输入您的年龄';this.style.color='#999';}">
        </div>
    
        <div class="phoneNum">
            <span>手机号</span>
            <input type="text" name="username" value="请输入您的手机号" style="color: #999;" onfocus="if(this.value=='请输入您的手机号') {this.value=''; this.style.color='#3c3c3c';}" onblur="if(this.value=='') {this.value='请输入您的手机号';this.style.color='#999';}">
        </div>
    
        <button class="btn" type="submit" value="register">注册</button>
    </form>
</div>

</body>
</html>